<!DOCTYPE html>
<html>

<head>
    <title>SVG Demo 02</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        div {
            float: left;
        }
    </style>
</head>

<body>
    <h1>Demo02:线条（直线和折线）</h1>
    <h2>line and polyline</h2>

    <div style="width: 200px;height:200px;stroke: red">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <line x1="0" y1="0" x2="120" y2="120"></line>
        </svg>
    </div>
    <div style="width: 200px;height:200px;stroke: red">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <polyline points="10,10 40,10 40,40 70,40 70,70 100,70 100,100" fill="#F9F38C" stroke="#D07735" stroke-width="5" />
        </svg>
    </div>
</body>

</html>